<!--suppress TypeScriptUnresolvedVariable -->
<template>
  <div class="RoleManage">
    <Layout>
      <content>
        <Row>
          <Col span="22">&nbsp;</Col>
          <Col span="2"><Button type="primary" @click="addRoleHandle()">新增角色</Button></Col>
        </Row>
        <!--表格-->
        <Table border :columns="columns" :data="pageInfoResponse.list" size="large">

          <template slot-scope="{ row, index }" slot="name">
              <Input v-if="row.isAble" v-model="row.name" size="large" clearable />
            <Input v-else disabled v-model="row.name" size="large" />
          </template>
          <template slot-scope="{ row, index }" slot="action">
            <template v-if="row.isAble">
              <Button type="primary" @click="saveRole(row.id,row.name)">保存</Button>
              &nbsp;&nbsp;&nbsp;
              <Button @click="row.isAble=false" type="warning" ghost >取消</Button>
            </template>
            <template v-else>
              <Button  type="warning" @click="row.isAble=true" >编辑</Button>
              &nbsp;&nbsp;&nbsp;
              <Button  type="error" @click="deleteRole(row.id)">删除</Button>
            </template>
          </template>
        </Table>
      </content>
      <footer>
        <template>
          <Page :total="pageInfoResponse.total" @on-change="getResourceList" :page-size="pageInfoRequest.pageSize" />
        </template>
      </footer>
    </Layout>
  </div>
</template>

<script lang="ts">
  import {Component, Vue} from 'vue-property-decorator'
  import {getCeSecurityRolePageListUrl,deleteSecurityRoleUrl,saveOrUpdateSecurityRoleUrl} from "@/common/HttpRequestUrl";
  @Component
  export default class RoleManage extends Vue {
    editSwitch = {}
    //  表单对应的列名
    columns= [
      {
        title: '角色id',
        key: 'id',
        align: 'center'
      },
      {
        title: '角色名称',
        slot: 'name',
        align: 'center'
      },
      {
        title: '操作',
        slot: 'action',
        align: 'center'
      }
    ]

    //  分页请求参数参数
    pageInfoRequest = {
      total : 0, //  数据总条数
      pageSize : 8,  //  每页的数据条数
      pageNum : 1 //  当前页数
    }
    //  分页返回参数
    pageInfoResponse = {
      list:[]
    }

    // 初始化方法获取角色列表数据
    mounted () {
      this.getResourceList(this.pageInfoRequest.pageNum,this.pageInfoRequest.pageSize)
    }

    //  查询分页数据
    getResourceList ( pageNum, pageSize ) {

      if ( pageNum != null ) {
        this.pageInfoRequest.pageNum = pageNum
      }
      if ( pageSize != null ) {
        this.pageInfoRequest.pageSize = pageSize
      }
      let objThis = this
      this.$post(getCeSecurityRolePageListUrl,{pageNum:this.pageInfoRequest.pageNum,pageSize:this.pageInfoRequest.pageSize}).then(function (res) {

        if (res.status) {
          objThis.pageInfoResponse = res.data
          objThis.pageInfoResponse.list.forEach(value=>value['isAble']=false)
        }
      })
    }

    // ===========================================================================数据编辑与删除=========================================================================
    /**
     * 新增角色操作
     */
    addRoleHandle () {
      let value = {isAble:true}
      this.pageInfoResponse.list.push(value)
    }
    saveRole(id,name) {

      let thisObj = this
      thisObj.$post(saveOrUpdateSecurityRoleUrl,{id:id,name:name}).then(function (res) {

        if (res.status) {
          thisObj.$Message.success('操作成功')
          //  刷新数据
          thisObj.getResourceList(thisObj.pageInfoRequest.pageNum,thisObj.pageInfoRequest.pageSize)
        }else {
          thisObj.$Message.error('操作失败')
        }
      })
    }

    /**
     * 删除角色
     */
    deleteRole ( id ) {

      let thisObj = this
      //  对话框弹出层
      this.$Modal.confirm({
        title: '角色删除',
        content: '确认要删除该角色？',
        onOk: () => {

          thisObj.$post(deleteSecurityRoleUrl,{id:id}).then(function (res) {

            if (res.status) {
              thisObj.$Message.success('删除成功')
              //  刷新数据
              thisObj.getResourceList(thisObj.pageInfoRequest.pageNum,thisObj.pageInfoRequest.pageSize)
            }else {
              thisObj.$Message.error('删除失败')
            }
          })
        }
      })
    }
  }
</script>


<style scoped>

</style>
